<template>
    <el-tabs :tab-position="tabPosition" v-model="daohang">
        <el-tab-pane label="数据概述" style="height: 100%">
            <div class="dhStyle">
                    <el-row type="flex" justify="center" class="ftgas">
                        <el-col :span="12">
                            <div class="bg-border">
                                <div>
                                    <span>今日收入</span>
                                    <span class="tu">￥{{TodayIncome}}</span>
                                    <a class="wehao" title="不包含余额充值、打赏金额">?</a>
                                </div>
                                    <a class="detail" @click="daohang= 'jyjl' ">收支明细</a>

                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="bg-border">
                                <div>
                                    <span>累计收入</span>
                                    <span class="tu">￥{{TodayIncomeall}}</span>
                                    <a class="wehao" title="不包含余额充值、打赏金额">?</a>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row type="flex" justify="center" class="ftgas">
                        <el-col :span="12">
                            <div class="bg-border">
                                <div>
                                    <span class="balance-title">累计交易完成</span>
                                </div>
                                <div>
                        <span class="tu">
                            ￥{{TodayTheBalance}}
                        </span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="bg-border">
                                <div>
                                    <span class="balance-title">拓客奖励</span>
                                </div>
                                <div>
                        <span class="tu">
                            ￥{{TodayTheBalance}}
                        </span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            <div id="myChart1" class="tubiaoStyle"></div>
            <div id="myChart2" class="tubiaoStyle"></div>
<!--            <div id="myChart3" class="tubiaoStyle"></div>-->
        </el-tab-pane>
        <el-tab-pane label="交易记录" style="height: 100%" name="jyjl">
<!--            <el-row :gutter="20" class="jjjl">-->
<!--                <el-col :span="2" :offset="2">-->
<!--                    <div class="grid-content">-->
<!--                    入住日期：-->
<!--                     </div>-->
<!--                </el-col>-->
<!--                <el-col :span="5">-->
<!--                    <el-date-picker-->
<!--                            v-model="value2"-->
<!--                            type="datetimerange"-->
<!--                            :picker-options="pickerOptions"-->
<!--                            range-separator="至"-->
<!--                            start-placeholder="开始日期"-->
<!--                            end-placeholder="结束日期"-->
<!--                            align="right">-->
<!--                    </el-date-picker>-->
<!--                </el-col>-->
<!--            </el-row>-->
            <el-row :gutter="20" class="jjjl">
                <el-col :span="2" :offset="2">
                    <div class="grid-content">
                       单号：
                    </div>
                </el-col>
                <el-col :span="5">
                    <el-input v-model="orderNum" placeholder="订单号/退款单号/支付流水号"></el-input>
                </el-col>
                <el-col :span="3" >
                    <div class="grid-content">
                        交易状态：
                    </div>
                </el-col>
                <el-col :span="5">
                    <el-select v-model="state">
                        <el-option
                                v-for="item in states"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row class="jjjl">
                <el-col :span="3" :offset="4">
                    <el-button type="primary" @click="transactionScreening()">筛选</el-button>
                </el-col>
            </el-row>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="全部" name="first"></el-tab-pane>
                <el-tab-pane label="待结账" name="second"></el-tab-pane>
                <el-tab-pane label="已结账" name="third"></el-tab-pane>
                <el-table
                        :data="transactionData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        height="auto"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            label="时间"
                            width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.orderTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="订单号｜支付/退货单号"
                            width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="对方">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.customerId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="金额（元）">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.price }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="状态">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.state }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="类型">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.orderType }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="备注">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.comment }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                            :page-size="pageSize"
                            :pager-count="5"
                            :current-page="currentPage"
                            :page-sizes="[3, 5, 8, 10]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="this.transactionData.length">
                    </el-pagination>
                </div>
            </el-tabs>
        </el-tab-pane>
<!--        <el-tab-pane label="消费类型">-->
<!--            <el-row :gutter="20" class="jjjl">-->
<!--                <el-col :span="2" :offset="2">-->
<!--                    <div class="grid-content">-->
<!--                        时间筛选：-->
<!--                    </div>-->
<!--                </el-col>-->
<!--                <el-col :span="4">-->
<!--                    <el-select v-model="timeStyle">-->
<!--                        <el-option-->
<!--                                v-for="item in timeStyles"-->
<!--                                :value="item">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-col>-->
<!--                <el-col :span="4">-->
<!--                    <el-date-picker-->
<!--                            v-model="time"-->
<!--                            type="month">-->
<!--                    </el-date-picker>-->
<!--                </el-col>-->
<!--            </el-row>-->
<!--            <el-row :gutter="20" class="jjjl">-->
<!--                <el-col :span="3" :offset="5">-->
<!--                    <el-button type="primary">筛选</el-button>-->
<!--                </el-col>-->
<!--            </el-row>-->
<!--            <el-col>-->
<!--                <el-table-->
<!--                        :data="tableData"-->
<!--                        style="width: 100%">-->
<!--                    <el-table-column-->
<!--                            prop="date"-->
<!--                            label="时间"-->
<!--                            width="180">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="name"-->
<!--                            label="总收入"-->
<!--                            width="180">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="address"-->
<!--                            label="微信支付">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="address"-->
<!--                            label="支付宝支付">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="address"-->
<!--                            label="现金付款">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="address"-->
<!--                            label="pos收款">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="address"-->
<!--                            label="余额支付">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            prop="address"-->
<!--                            label="其他">-->
<!--                    </el-table-column>-->
<!--                </el-table>-->
<!--            </el-col>-->
<!--        </el-tab-pane>-->
    </el-tabs>
</template>

<script>
    export default {
        name: "Finance",
        data(){
            return {
                daohang:'',
                search:'',
                tableData:[],
                totalNum:1,
                pageSize:5,
                currentPage:1,
                // 总数据
                transactionData:[],
                transactionData2:[],
                time: '2011-02',
                timeStyle:'日报',
                timeStyles:['日报','月报'],
                activeName: 'first',
                states:['全部','待结账','已结账','免单','待付款','待消费'],
                state:'全部',
                orderNum:'',
                TodayIncome: '',
                TodayTheBalance:'',
                TodayIncomeall:'',
                tabPosition : 'left',
                value2: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                }
            }
        },
        mounted:function () {
            this.drawLine1();
            this.drawLine2();
            this.getTransactionData();
        },
        methods:{
            drawLine1(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart1'))
                // 绘制图表
                myChart.setOption( {
                    title: {
                        text: '订单金额分布'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['点餐', '预约']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '点餐',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '预约',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        }
                    ]
                });
            },
            drawLine2(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart2'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '来源渠道',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['微信端', '支付宝端', '收银台', '浏览器', '小程序','收银台点单','其他']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '微信端'},
                                {value: 310, name: '支付宝端'},
                                {value: 234, name: '收银台'},
                                {value: 135, name: '浏览器'},
                                {value: 1548, name: '小程序'},
                                {value: 1548, name: '收银台点单'},
                                {value: 1548, name: '其他'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },
            getTransactionData(){
                this.$axios.post('ec/list').then((datas)=>{
                    // this.totalNum = datas.data.length % this.pageSize === 0 ?datas.data.length / this.pageSize:datas.data.length / this.pageSize + 1;
                    this.transactionData.length = 0;
                    datas.data.forEach(data=>{
                        this.transactionData.push(data);
                    })
                    this.transactionData2 = this.transactionData;
                });

            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变当前页数
                this.currentPage=val
            },
            handleSizeChange(val){
                this.pageSize = val;
            },
            checkData(data) {
                if(this.orderNum != '' ){
                    return data.id == this.orderNum
                }else if(this.state.toLowerCase() == '全部'){
                    return true;
                }else{
                    return this.state.toLowerCase() == data.state.toLowerCase()
                }
                // return data.id == this.orderNum && this.state.toLowerCase() == data.state.toLowerCase() || this.state.toLowerCase() == '全部';
            },
            transactionScreening(){
                this.transactionData = this.transactionData2.filter(this.checkData)
                // tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))
            },
            getDataOverview(){
                this.$axios.post('ec/data').then((datas)=>{
                    this.TodayIncome = datas.data.todayMoney;
                    this.TodayIncomeall = datas.data.ljMoney;
                    this.TodayTheBalance = datas.data.JyMoney;
                })
            },
            handleClick(tab) {
                if(tab.paneName == 'first'){
                    this.state = '全部'
                }else if(tab.paneName == 'second'){
                    this.state = '待结账'
                }else if(tab.paneName == 'third'){
                    this.state = '已结账'
                }
                this.transactionData = this.transactionData2.filter(this.checkData)
            }

        },
        created:function(){
            this.getDataOverview();
        }
    }
</script>

<style scoped>
    @import "../style/finance.css";
</style>